<template>
  <view class="calculator-container">
    <view class="input-group">
      <!-- 成本输入 -->
      <view class="input-row">
        <view class="label">成本</view>
        <input 
          type="digit" 
          v-model="form.cost" 
          @input="handleInput($event, 'cost')"
          placeholder="请输入成本"
        />
        <text class="unit">元</text>
      </view>

      <!-- 售价输入 -->
      <view class="input-row">
        <view class="label">售价</view>
        <input 
          type="digit" 
          v-model="form.price" 
          @input="handlePriceInput"
          placeholder="请输入售价"
        />
        <text class="unit">元</text>
        <input 
          type="digit" 
          class="percent-input"
          v-model="priceRate"
          @input="handlePriceRateInput"
          placeholder="0.00"
        />
        <text class="percent-symbol">%</text>
      </view>

      <!-- 佣金输入 -->
      <view class="input-row">
        <view class="label">佣金</view>
        <input 
          type="digit" 
          v-model="commission" 
          @input="handleCommissionInput"
          placeholder="请输入佣金"
        />
        <text class="unit">元</text>
        <input 
          type="digit" 
          class="percent-input"
          v-model="commissionRate"
          @input="handleCommissionRateInput"
          placeholder="0.00"
        />
        <text class="percent-symbol">%</text>
      </view>

      <!-- 服务费输入 -->
      <view class="input-row">
        <view class="label">服务费</view>
        <input 
          type="digit" 
          v-model="serviceFee" 
          @input="handleServiceFeeInput"
          placeholder="请输入服务费"
        />
        <text class="unit">元</text>
        <input 
          type="digit" 
          class="percent-input"
          v-model="serviceFeeRate"
          @input="handleServiceFeeRateInput"
          placeholder="0.00"
        />
        <text class="percent-symbol">%</text>
      </view>

      <!-- 利润显示 -->
      <view class="profit-row">
        <view class="label">利润</view>
        <text class="profit-amount">{{ profit }}元</text>
        <text class="percentage">{{ profitPercentage }}%</text>
      </view>
    </view>

    <!-- 按钮组 -->
    <view class="button-group">
      <button class="reset-btn" @tap="handleReset">重置</button>
      <button class="copy-btn" @tap="copyResult">复制结果</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CooperationCalculator',
  data() {
    return {
      form: {
        cost: '',
        price: ''
      },
      commission: '',
      serviceFee: '',
      commissionRate: '',
      serviceFeeRate: '',
      priceRate: ''
    }
  },
  computed: {
    // 利润金额
    profit() {
      const cost = parseFloat(this.form.cost) || 0
      const price = parseFloat(this.form.price) || 0
      const commission = parseFloat(this.commission) || 0
      const serviceFee = parseFloat(this.serviceFee) || 0
      return (price - cost - commission - serviceFee).toFixed(2)
    },
    // 利润百分比（相对于成本）
    profitPercentage() {
      const cost = parseFloat(this.form.cost)
	  const price = parseFloat(this.form.price)
      if (!cost) return '0.00'
      return ((parseFloat(this.profit) / price) * 100).toFixed(2)
    }
  },
  methods: {
    handleReset() {
      this.form.cost = ''
      this.form.price = ''
      this.commission = ''
      this.serviceFee = ''
      this.commissionRate = ''
      this.serviceFeeRate = ''
      this.priceRate = ''
    },

    handleInput(event, field) {
      let value = this.formatNumberInput(event.detail.value)
      this.form[field] = value
      if (field === 'cost' && value && this.form.price) {
        const cost = parseFloat(value)
        const price = parseFloat(this.form.price)
        if (cost > 0) {
          this.priceRate = ((price / cost) * 100).toFixed(2)
        }
      }
    },

    handlePriceInput(event) {
      let value = this.formatNumberInput(event.detail.value)
      this.form.price = value
      // 更新售价率
      if (value && this.form.cost) {
        const price = parseFloat(value)
        const cost = parseFloat(this.form.cost)
        if (cost > 0) {
          this.priceRate = ((cost / price) * 100).toFixed(2)
        }
      }
      // 同时更新佣金和服务费的百分比
      this.updateCommissionRate()
      this.updateServiceFeeRate()
    },

    handlePriceRateInput(event) {
      let value = this.formatNumberInput(event.detail.value)
      this.priceRate = value
      // 反向计算售价
      if (value && this.form.cost) {
        const rate = parseFloat(value)
        const cost = parseFloat(this.form.cost)
        if (cost > 0) {
          this.form.price = ((cost * rate) / 100).toFixed(2)
          // 更新佣金和服务费的金额
          this.updateCommissionAmount()
          this.updateServiceFeeAmount()
        }
      }
    },

    handleCommissionInput(event) {
      let value = this.formatNumberInput(event.detail.value)
      this.commission = value
      this.updateCommissionRate()
    },

    handleServiceFeeInput(event) {
      let value = this.formatNumberInput(event.detail.value)
      this.serviceFee = value
      this.updateServiceFeeRate()
    },

    handleCommissionRateInput(event) {
      let value = this.formatNumberInput(event.detail.value)
      this.commissionRate = value
      this.updateCommissionAmount()
    },

    handleServiceFeeRateInput(event) {
      let value = this.formatNumberInput(event.detail.value)
      this.serviceFeeRate = value
      this.updateServiceFeeAmount()
    },

    updateCommissionRate() {
      if (this.commission && this.form.price) {
        const commission = parseFloat(this.commission)
        const price = parseFloat(this.form.price)
        if (price > 0) {
          this.commissionRate = ((commission / price) * 100).toFixed(2)
        }
      }
    },

    updateServiceFeeRate() {
      if (this.serviceFee && this.form.price) {
        const serviceFee = parseFloat(this.serviceFee)
        const price = parseFloat(this.form.price)
        if (price > 0) {
          this.serviceFeeRate = ((serviceFee / price) * 100).toFixed(2)
        }
      }
    },

    updateCommissionAmount() {
      if (this.commissionRate && this.form.price) {
        const rate = parseFloat(this.commissionRate)
        const price = parseFloat(this.form.price)
        if (price > 0) {
          this.commission = ((price * rate) / 100).toFixed(2)
        }
      }
    },

    updateServiceFeeAmount() {
      if (this.serviceFeeRate && this.form.price) {
        const rate = parseFloat(this.serviceFeeRate)
        const price = parseFloat(this.form.price)
        if (price > 0) {
          this.serviceFee = ((price * rate) / 100).toFixed(2)
        }
      }
    },

    formatNumberInput(value) {
      // 只允许数字和小数点
      value = value.replace(/[^\d.]/g, '')
      // 确保只有一个小数点
      const parts = value.split('.')
      if (parts.length > 2) {
        value = parts[0] + '.' + parts.slice(1).join('')
      }
      // 限制小数位数为2位
      if (parts.length === 2 && parts[1].length > 2) {
        value = parts[0] + '.' + parts[1].slice(0, 2)
      }
      return value
    },
	getCurrentTime() {
	  return new Date().toLocaleString('zh-CN', {
	    year: 'numeric',
	    month: '2-digit',
	    day: '2-digit',
	    hour: '2-digit',
	    minute: '2-digit',
	    second: '2-digit',
	    hour12: false
	  })
	},

    copyResult() {
      const result = `计算结果： \n` +
		`成本: ${this.form.cost}元, \n` +
        `售价: ${this.form.price}元(${this.priceRate}%), \n` +
        `佣金: ${this.commission}元(${this.commissionRate}%), \n` +
        `服务费: ${this.serviceFee}元(${this.serviceFeeRate}%), \n` +
        `利润: ${this.profit}元(${this.profitPercentage}%) \n \n \n` +
		
		`计算时间: ${this.getCurrentTime()}\n` +
		`PS: 成本包含产品成本跟运费以及其他未知成本，别弄错了哦。\n\n\n` +
		`本结果由"电商计算器"小程序生成，微信搜索"电商计算器"即可免费使用。`

      uni.setClipboardData({
        data: result,
        success: () => {
          uni.showToast({ title: '已复制到剪贴板', icon: 'success' })
        }
      })
    }
  }
}
</script>

<style>
.calculator-container {
  padding: 20rpx;
  background-color: #f8f9fa;
}

.input-group {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.input-row, .profit-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  position: relative;
}

.label {
  width: 120rpx;
  font-size: 28rpx;
  color: #333;
}

input {
  flex: 1;
  height: 70rpx;
  background-color: #f8f9fa;
  border: none;
  border-radius: 8rpx;
  padding: 0 20rpx;
  margin-right: 10rpx;
  font-size: 28rpx;
}

.unit {
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx;
}

.percent-input {
  flex: 0 0 100rpx;
  text-align: right;
  margin-right: 0;
}

.percent-symbol {
  font-size: 28rpx;
  color: #666;
  margin-left: 4rpx;
  width: 30rpx;
}

.percentage {
  font-size: 28rpx;
  color: #666;
  min-width: 80rpx;
  text-align: right;
}

.profit-row {
  background-color: #ff6b01;
  padding: 20rpx;
  border-radius: 8rpx;
  color: #fff;
}

.profit-row .label {
  color: #fff;
}

.profit-amount {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.profit-row .percentage {
  color: #fff;
}

.button-group {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.reset-btn, .copy-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.reset-btn {
  background-color: #000;
  color: #fff;
}

.copy-btn {
  background-color: #ff6b01;
  color: #fff;
}
</style> 